<!--#include file="common_head.html"-->

<div class="dux-page-head">
    <div class="am-g am-g-fixed">
        <ol class="am-breadcrumb dux-page-crumb">
            <li><a href="/">首页</a></li>
            <!--loop{$pageInfo.crumb as $vo}-->
            <li><a href="{$vo.url}">{$vo.name}</a></li>
            <!--{/loop}-->
        </ol>


        <div class="dux-shop-info am-cf">
            <div class="show" data-dux="shop-show">
                <div class="preview">
                    <img src="{$info.image}" alt="">
                </div>
                <ul class="items am-cf">
                    <!--loop{$info.images as $vo}-->
                    <li class="active"><img src="{$vo.url}"></li>
                    <!--{/loop}-->
                </ul>
            </div>
            <div class="info am-cf">
                <div class="title">{$info.title}</div>
                <div class="subtitle">{$info.subtitle}</div>
                <div class="price">¥{$proInfo.sell_price}
                    <small>¥{$proInfo.market_price}</small>
                    <span class="store">剩余: {$proInfo.store}{$info.unit}</span>
                </div>

                <ul class="data am-avg-sm-3">
                    <li>
                        销量 <span>{$info.sale}</span>
                    </li>
                    <li>
                        评论 <span>{$info.comments}</span>
                    </li>
                    <li>
                        收藏 <span>{$info.favorite}</span>
                    </li>
                </ul>

                <div class="filter am-cf" data-dux="shop-sku">
                    <!--loop{$specList as $vo}-->
                    <dl class="am-cf">
                        <dt>{$vo.name}</dt>
                        <dd class="items">
                            <!--loop{$vo.value as $v}-->
                            <!--if{$v == $vo.cur}-->
                            <a href="javascript:;" class="active" data-id="{$vo.id}" data-name="{$vo.name}"
                               data-value="{$v}">
                                <!--{else}-->
                                <a href="javascript:;" data-id="{$vo.id}" data-name="{$vo.name}" data-value="{$v}">
                                    <!--{/if}-->
                                    {$v}</a>
                                <!--{/loop}-->
                        </dd>
                    </dl>
                    <!--{/loop}-->

                    <dl class="am-cf">
                        <dt>数量</dt>
                        <dd>
                            <div class="dux-page-count" data-count="{$proInfo.store}" data-dux="shop-count">
                                <a class="up">+</a>
                                <input type="tel" value="1" name="count" id="count" data-num>
                                <a class="down">-</a>
                            </div>
                        </dd>
                    </dl>
                </div>
                <div class="func">
                    <a class="am-btn am-btn-primary am-btn-lg" href="javascript:;" data-url="{url('mall/Mall/addCart')}"
                       data-params='{"pro_id" : {$proInfo.products_id}}' data-count="#count"
                       data-dux="shop-addCart"><i class="am-icon-shopping-cart"></i> 加入购物车</a>
                        <a class="am-btn am-btn-warning am-btn-lg" href="javascript:;" data-dux="shop-follow" data-url="{url('mall/Mall/addFollow')}" data-params='{"mall_id" : {$info.mall_id}}' data-status="{$info.follow}"><i class="{$info.follow ? 'am-icon-heart' : 'am-icon-heart-o'}" data-icon></i> 喜欢</a>
                </div>
            </div>
        </div>


    </div>

</div>

<div class="am-g am-g-fixed dux-shop-layout">
    <div class="layout-sidebar">
        <div class="dux-page-box">
            <div class="box-title">商品推荐</div>

            <ul class="dux-shop-sidebar">
                <!--list{app="mall" label="contentList" class_id=$info.class_id limit=6 where="mall_id not in(".$info['mall_id'].")"}-->
                <li class="dux-shop-item">
                    <div class="img">
                        <a href="{$list.url}"><img
                                src="{$list.image}"
                                alt="{$list.title}"></a>
                    </div>
                    <div class="title"><a href="{$list.url}">{$list.title}</a></div>
                    <div class="price">
                        ￥{$list.sell_price}
                    </div>
                </li>
                <!--{/list}-->
            </ul>
        </div>
    </div>
    <div class="layout-body am-tabs dux-shop-tabs" data-am-tabs>
        <ul class="am-tabs-nav am-nav am-nav-tabs  am-cf">
            <li class="am-active"><a href="#tab1">商品详情</a></li>
            <li><a href="#tab2">商品评价 ({$info.comments})</a></li>
            <li><a href="#tab3">商品咨询</a></li>
        </ul>

        <div class="am-tabs-bd">
            <div class="am-tab-panel am-active" id="tab1">
                <div class="dux-shop-text">
                    {html_out($info.content)}
                </div>
            </div>
            <div class="am-tab-panel" id="tab2">
                <div class="dux-comment-info am-cf">
                    <div class="rate">
                        <strong>{$commentRate.positive ? $commentRate.positive : 100}
                            <small>%</small>
                        </strong>
                        <p>好评度</p>
                    </div>
                    <div class="percent">
                        <dl>
                            <dt>好评({$commentRate.positive}%)</dt>
                            <dd>
                                <div class="am-progress am-progress-sm">
                                    <div class="am-progress-bar" style="width: {$commentRate.positive}%"></div>
                                </div>
                            </dd>
                        </dl>
                        <dl>
                            <dt>中评({$commentRate.neutral}%)</dt>
                            <dd>
                                <div class="am-progress am-progress-sm">
                                    <div class="am-progress-bar" style="width: {$commentRate.neutral}%"></div>
                                </div>
                            </dd>
                        </dl>
                        <dl>
                            <dt>差评({$commentRate.negative}%)</dt>
                            <dd>
                                <div class="am-progress am-progress-sm">
                                    <div class="am-progress-bar" style="width: {$commentRate.negative}%"></div>
                                </div>
                            </dd>
                        </dl>
                    </div>
                    <div class="info">
                        <p>购买商品后才可以评价</p>
                        <a class="am-btn am-btn-primary " href="{url('mall/order/index')}"><i
                                class="am-icon-comment-o"></i> 评价商品</a>
                    </div>
                </div>


                <div class="dux-comment-list">
                    <!--if{empty($commentList)}-->
                    <div class="am-padding am-text-center">
                        暂无商品评论
                    </div>
                    <!--{/if}-->
                    <ul class="list-type am-cf">
                        <li><a href="{url('shop/comment/index', ['id' => $info.mall_id, 'app' => 'mall'])}">全部评价</a></li>
                        <li>
                            <a href="{url('shop/comment/index', ['id' => $info.mall_id, 'app' => 'mall', 'type' => 1])}">好评({$commentCount.positive})</a>
                        </li>
                        <li>
                            <a href="{url('shop/comment/index', ['id' => $info.mall_id, 'app' => 'mall', 'type' => 2])}">中评({$commentCount.neutral})</a>
                        </li>
                        <li>
                            <a href="{url('shop/comment/index', ['id' => $info.mall_id, 'app' => 'mall', 'type' => 3])}">差评({$commentCount.negative})</a>
                        </li>
                    </ul>
                    <ul class="list-items">
                        <!--loop{$commentList as $vo}-->
                        <li class="am-cf">
                            <div class="user">
                                <div class="img">
                                    <img src="{$vo.user_avatar}"
                                         alt="">
                                </div>
                                <div class="name">{$vo.user_nickname}</div>
                            </div>
                            <div class="body">
                                <div class="info am-cf">
                                    <span class="stars">
                                        <!--if{!$vo.level}-->
                                        <i class="am-icon-star-o"></i>
                                        <i class="am-icon-star-o"></i>
                                        <i class="am-icon-star-o"></i>
                                        <i class="am-icon-star-o"></i>
                                        <i class="am-icon-star-o"></i>
                                        <!--{/if}-->
                                        <!--if{$vo.level == 1}-->
                                        <i class="am-icon-star"></i>
                                        <i class="am-icon-star"></i>
                                        <i class="am-icon-star"></i>
                                        <i class="am-icon-star-o"></i>
                                        <i class="am-icon-star-o"></i>
                                        <!--{/if}-->
                                        <!--if{$vo.level == 2}-->
                                        <i class="am-icon-star"></i>
                                        <i class="am-icon-star"></i>
                                        <i class="am-icon-star"></i>
                                        <i class="am-icon-star"></i>
                                        <i class="am-icon-star"></i>
                                        <!--{/if}-->
                                    </span>
                                    <span class="time">{date('Y-m-d H:i', $vo.time)}</span>
                                </div>
                                <div class="content">
                                    {$vo.content}
                                    <!--if{!empty($vo.images)}-->
                                    <ul class="images am-cf">
                                        <!--loop{$vo.images as $img}-->
                                        <li>
                                            <a href="{$img}" target="_blank"><img src="{$img}"></a>
                                        </li>
                                        <!--{/loop}-->
                                    </ul>
                                    <!--{/if}-->
                                </div>

                                <div class="spec">
                                    {$vo.spec}
                                </div>
                            </div>
                        </li>
                        <!--{/loop}-->
                    </ul>
                </div>
            </div>
            <div class="am-tab-panel" id="tab3">
                <div class="dux-ask-info am-cf">
                    <div class="btn">
                        <a class="am-btn am-btn-primary" href="{url('shop/faq/index', ['id' => $info.mall_id, 'app' => 'mall', 'type' => 1])}"><i class="am-icon-comment-o"></i> 咨询商品</a>
                    </div>
                    <div class="info">
                        因厂家更改产品包装、产地或者更换随机附件等没有任何提前通知，且每位咨询者购买情况、提问时间等不同，为此以下回复仅对提问者3天内有效，其他网友仅供参考！若由此给您带来不便请多多谅解，谢谢！
                    </div>
                </div>
                <div class="dux-ask-list">
                    <ul class="am-comments-list am-comments-list-flip">
                        <!--if{empty($faqList)}-->
                        <div class="am-padding am-text-center">
                            暂无商品咨询
                        </div>
                        <!--{/if}-->
                        <!--loop{$faqList as $vo}-->
                        <li class="am-comment"><img src="{$vo.user_avatar}" class="am-comment-avatar" width="48" height="48">
                            <div class="am-comment-main">
                                <header class="am-comment-hd">
                                    <div class="am-comment-meta"><a href="#link-to-user" class="am-comment-author">{$vo.show_name}</a>
                                        咨询时间
                                        <time>{date('Y-m-d H:i:s', $vo.time)}</time>
                                    </div>
                                </header>
                                <div class="am-comment-bd"><p>{$vo.content}</p>
                                    <!--if{$vo.replay_time}-->
                                    <blockquote>{$vo.reply_content}</blockquote>
                                    <!--{/if}-->
                                </div>
                            </div>
                        </li>
                        <!--{/loop}-->
                    </ul>

                    <!--if{!empty($faqList)}-->
                    <div class="am-text-center am-margin-top">
                        <a href="{url('shop/faq/index', ['id' => $info.mall_id, 'app' => 'mall'])}" >查看全部问题...</a>
                    </div>
                    <!--{/loop}-->

                </div>
                <form class="dux-ask-form am-form am-margin-top" data-dux="form-bind" data-advanced="false" method="post" action="{url('mall/mall/addFaq')}">
                    <div class="am-form-group">
                        <textarea name="content" placeholder="请填写您对本商品的咨询问题，客服人员将会为您解答，限100个字内" rows="3"></textarea>
                    </div>
                    <input type="hidden" name="mall_id" value="{$info.mall_id}">
                    <p><button type="submit" class="am-btn am-btn-primary">提交咨询</button></p>
                </form>
            </div>
        </div>
    </div>
</div>


<script>
    var productJson = {json_encode($skuList)};
</script>
<!--#include file="common_footer.html"-->
</html>